

<head>
<style>
<!--
body         { font-family: Verdana }
-->
</style>
</head>

<h1>Arctic</h1>
<p>Arctic is a small, simple, light-weight Domain Specific Language for making
user interfaces in haXe targetting Flash 8 &amp; 9.</p>
<h2>Installation</h2>
<p>Run</p>
<blockquote>
<pre>haxelib install arctic</pre>
</blockquote>
<p>to install the latest version of Arctic.</p>
<h2>Hello world!</h2>
<p>Hello world in Arctic looks like this:</p>
<blockquote>
<pre>import arctic.Arctic;
import arctic.ArcticView;
import arctic.ArcticBlock;

class HelloWorld {
	static public function main() {
		new HelloWorld(flash.Lib.current);
	}
	
	public function new(parent : ArcticMovieClip) {
		// To make a screen, first build the data structure representing the content
		var me = this;
		<font color="red">var helloWorld = Arctic.makeSimpleButton(&quot;Hello world&quot;,  function() { me.remove(); }, 50);</font>
		// Then construct the arctic object
		arcticView = new ArcticView( helloWorld );
		// And finally display on the given movieclip
		var root = arcticView.display(parent, true);
	}
	public function remove() {
		// Clear out the screen
		arcticView.destroy();
	}
	public var arcticView : ArcticView;
}</pre>
</blockquote>
<p>Save this as <code>HelloWorld.hx</code>  (or have a look at
examples/HelloWorld.hx) and compile with <code>haxe -lib arctic -swf HelloWorld.swf -main HelloWorld</code>.
The result is a flash movie which has a button in the top-left corner with the
text &quot;Hello world&quot; 50 pixels high. When you click that, the button is removed, and
the program ends.</p>
<p>User interfaces in Artic are built from blocks. In the example above, the
only block used is a button, which is constructed by the <code>Arctic.makeSimpleButton</code>
function. This is a helper function, which returns an <code>ArcticBlock</code>. This block is
then given to an <code>ArcticView</code>. The <code>display</code> call renders the view on the given
MovieClip. Behind the scene, a bunch of MovieClips representing the blocks requested are constructed, 
and the top-level MovieClip is returned. Normally, you don't need to use that MovieClip for anything.</p>
<p>When the button is clicked, the function given as the second parameter to <code>makeSimpleButton</code>
is called. This in turns calls the class member <code>remove</code>, which destroys the MovieClips that the <code>ArcticView</code>
code made, and thus the screen is cleared again.</p>

<p>Notice that we use ArcticMovieClip rather than MovieClip in the code above.
This is because the MovieClip is different in Flash 8 and 9, so Arctic provides
an alias to make the code work in both Flash 8 and 9. Try to compile the code
with <code>-swf-version 9</code> and see yourself.</p>

<h2>Doing layout</h2>

<p>The blocks in Arctic are designed to be combined similar to lego bricks.
Technically, each block is an entry in a haXe enum. There are a number of
different blocks available - hopefully enough to build interesting user
interfaces. Let's center the button horizontally by using a layout block, in
this case a ColumnStack. Change the red line to</p>

<blockquote>

<pre>var helloWorld = ColumnStack( [ Filler,
	Arctic.makeSimpleButton(&quot;Hello world&quot;,  function() { me.remove(); }, 50),
	Filler ] );</pre>

</blockquote>
<p>and recompile. Now the button is centered horizontally. Notice that Arctic
also handles resizing of the canvas for you: Try to resize the Flash window, and
see how the button is constantly centered. (If you don't want Arctic to handle
resizing for you, just pass <code>false</code> in the <code>arcticView.display</code> call.)</p>

<p>A ColumnStack takes an array of blocks, and puts them next to each other
horizontally. In the example above, we use three blocks: A Filler, the button
like before, and another Filler. A Filler block is a special, empty block that
stretches itself to take up as much space as is available. By surrounding the
button with fillers, the effect is that the ColumnStack grows to fill the entire
width available, such that each filler takes up half the extra space available.
The result is that the button is centered.</p>

<p>If you want to right align the button, just remove the last Filler.</p>

<p>Besides ColumnStack, Arctic also has LineStack which stacks blocks on top of
each other vertically. The LineStack will also add a scrollbar in case there is
not enough room for all blocks. (The ColumnStack does not do that yet, so if
there is not enough space in the width, the right most blocks will just be
outside the screen. This might change in a future version of Arctic.)</p>
<p>So if we change the code to</p>
<blockquote>

<pre>var helloWorld = LineStack( [
	Filler, 
	ColumnStack( [ 
		Filler,
		Arctic.makeSimpleButton(&quot;Hello world&quot;,  function() { me.remove(); }, 50),
		Filler ] ),
	Filler ] );</pre>

</blockquote>
<p>and recompile, the result is a button which is centered in the middle
of the screen.</p>
<h2>Text &amp; backgrounds</h2>
<p>Let's spice our example up with some more content. We can add some text at
the top using the Text block:</p>
<blockquote>

<pre>var helloWorld = LineStack( [
<font color="#FF0000">	Text(&quot;Some text in &lt;b&gt;HTML&lt;/b&gt; is nice&quot;),
</font>	Filler, 
	ColumnStack( [ 
		Filler,
		Arctic.makeSimpleButton(&quot;Hello world&quot;,  function() { me.remove(); }, 50),
		Filler ] ),
	Filler ] );</pre>

</blockquote>
<p>Flash only supports a tiny subset of HTML, but it does allow us to choose
fonts and colors. The default font in Flash is not very nice, so there is a
helper Arctic.wrapWithDefaultFont which will wrap a string with an Arial font in
given size and color - in this case 16 pixels high and blue color:</p>
<blockquote>

<pre>var helloWorld = LineStack( [
	Text(<font color="#FF0000">Arctic.wrapWithDefaultFont(</font>&quot;Some text in &lt;b&gt;HTML&lt;/b&gt; is nice&quot;<font color="#FF0000">, 16, &quot;#0000ff&quot;)),
</font>	Filler, 
	ColumnStack( [ 
		Filler,
		Arctic.makeSimpleButton(&quot;Hello world&quot;,  function() { me.remove(); }, 50),
		Filler ] ),
	Filler ] );</pre>

</blockquote>
<p>We can also add a rounded background color using the Background element:</p>
<blockquote>

<pre>var helloWorld = <font color="#FF0000">Background(0xdddddd,</font>
	LineStack( [
		Text(Arctic.wrapWithDefaultFont(&quot;Some text in &lt;b&gt;HTML&lt;/b&gt; is nice&quot;, 16, &quot;#0000ff&quot;)),
		Filler, 
		ColumnStack( [ 
			Filler,
			Arctic.makeSimpleButton(&quot;Hello world&quot;,  function() { me.remove(); }, 50),
			Filler ] ),
		Filler ] )
	<font color="#FF0000">, 100.0, 20)</font>;</pre>

</blockquote>
<p>The 100.0 value in the last line means that the background is fully opaque,
and the 20 value means that the background is rounded.</p>
